{% extends "account/account_base.html" %}
{% block title %}外部账户{% endblock %}
{% block head %} 
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-table.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/select2.min.css') }}">
{% endblock %}
{% block page_content %}

<h1 class="page-header">个人用户</h1>
<div class="col-md-12">
	<div class="col-md-1" style="margin-top:3px;">
		<select class="select2" id="search_type" >
			<option value='4'>选择条件</option>
			<option value='0'>按ID</option>
			<option value='1'>按地区</option>
			<option value='2'>按时间</option>
			<option value='3'>联合搜索</option>
		</select>
	</div>
	<div id="by_id" class="col-md-2" style="display:none;margin-left:20px;">
			<input id="number" style="height:36px;width:95%;"type="text" placeholder="输入完整ID">
	</div>
	<div id="by_area" class="col-md-2" style="display:none;margin-left:20px;" >		
		<input id="area" style="height:36px;width:95%;"type="text" placeholder="地区">
	</div>
	<div id="by_time" class="col-md-5" style="display:none;" >
		<div class="col-md-5">
			<input type="text" id="start" style="height:36px;width:99%;" readonly required>
		</div>
		<div class="col-md-1" style="margin-right:15px;margin-top:8px;font-size:15px;">至</center></div>
		<div class="col-md-5">
			<input type="text" id="end" style="height:36px;width:99%;" readonly required>
		</div>
	</div>
	<div id="buttons" class="col-md-2" style="display:none;" >
		<button class="btn btn-info" onclick="search()" >&nbsp查询&nbsp</button>
		<button class="btn btn-warning" onclick="reset()" >&nbsp重置&nbsp</button>
	</div>
	<input id="tb_name" type="hidden" >
</div>

<div class="col-md-12">
    <div class="panel-body" style="padding-bottom:0px;">
	<ul id="myTab" class="nav nav-tabs">
            <li class="active">
		<a href="#valid" data-toggle="tab" onclick="setTable('valid')">生效</a>
   	    </li>
            <li>
		<a href="#invalid" data-toggle="tab" onclick="setTable('invalid')">冻结</a>
	    </li>
        </ul>
	<div id="myTabContent" class="tab-content">
	    <div class="tab-pane fade in active" id="valid"> 
	    	 <table id="tb_valid"></table>
	    </div>
	    <div class="tab-pane fade" id="invalid"> 
	    	 <table id="tb_invalid"></table>
	    </div>
	</div>
    </div>
</div>

<div class="modal fade" id="FreezeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="freeze_label"></h4>
			</div>
			<div class="modal-body">
				<form role="form" id="FreezeForm">
					<label for="reason">冻结原因</label>
					<textarea class="form-control" id="reason" name="reason" cols=20 rows=5 required></textarea>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-success" onclick="Freeze()">确定</button>
				<button type="button" class="btn btn-danger" data-dismiss="modal" aria-hidden="true">取消</button>
			</div> 
		</div>
	</div><!-- /.modal-dialog -->
</div>

<div class="modal fade" id="RecoveryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="myModalLabel">恢复账号</h4>
			</div>
			<div class="modal-body">
				<center id='ct_recovery'></center>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-success" onclick="Recovery()">确定</button>
				<button type="button" class="btn btn-danger" data-dismiss="modal" aria-hidden="true">取消</button>
			</div> 
		</div>
	</div><!-- /.modal-dialog -->
</div>

{% endblock %}
{% block scripts  %}
{{ super() }}
<script src="{{ url_for('static', filename='js/bootstrap-table.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap-table-zh-CN.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap-datetimepicker.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap-datetimepicker.zh-CN.js') }}" charset="UTF-8"></script>
<script src="{{ url_for('static', filename='js/select2.min.js') }}"></script>
<script>

var by_id = document.getElementById('by_id');
var by_area = document.getElementById('by_area');
var by_time = document.getElementById('by_time');
var by_combine = document.getElementById('combine');
var buttons = document.getElementById('buttons');

var GetToday = function(){

	var today = new Date();
	var month = today.getMonth() + 1;
	month = month < 10 ? '0' + month : month;
	var day = today.getDate();
	day = day < 10 ? '0' + day : day;
	var value = today.getFullYear() + '-' + month + '-' + day ;
	return value;
}

$(document).ready(function(){
	
  	$(".select2").select2({
		minimumResultsForSearch: Infinity,
	});

	var value = GetToday();

	$('#start').datetimepicker({
		format: 'yyyy-mm-dd',
		language: 'zh-CN',
		autoclose: true,
		minView: 2,
	});
	
	$('#end').datetimepicker({
		format: 'yyyy-mm-dd',
		language: 'zh-CN',
		autoclose: true,
		minView: 2,
	});

	$('#start').datetimepicker('setEndDate', value);
	$('#end').datetimepicker('setEndDate', value);

	document.getElementById('start').value = value;
	document.getElementById('end').value = value;

	$('#search_type').on('select2:selecting', function(e){
		var value = e.params.args.data.id;
		if(value==='4'){
			by_id.style.display = 'none';
			by_area.style.display = 'none';
			by_time.style.display = 'none';
			buttons.style.display = 'none';
		}
		else if(value==='3'){
			by_id.style.display = 'none';
			by_area.style.display = '';
			by_time.style.display = '';
			buttons.style.display = '';
		}
		else{
			by_id.style.display = 'none';
			by_area.style.display = 'none';
			by_time.style.display = 'none';
			buttons.style.display = '';
			if(value==='0'){
				by_id.style.display = '';
			}
			else if(value==='1'){
				by_area.style.display = '';
			}
			else if(value==='2'){
				by_time.style.display = '';
			}
		}
	})
	$('#search_type').select2('val', '4');
});

var selected_table = 'valid';

var setTable = function(table){
	selected_table = table;
}

var search = function(){
	document.getElementById('tb_name').value = selected_table;
   	$("#tb_" + selected_table).bootstrapTable('refresh', {'silent': true});
}

var reset = function(){

	$('#search_type').select2('val', '4');
	by_id.style.display = 'none';
	by_area.style.display = 'none';
	by_time.style.display = 'none';
	buttons.style.display = 'none';
	search();
}

</script>
<script>
$(function () {

    //初始化Table
    var tb_valid = new TableInit("tb_valid");
    tb_valid.Init();
    var tb_invalid = new TableInit("tb_invalid");
    tb_invalid.Init();
});


var TableInit = function (table_id) {
    var oTableInit = new Object();
    var urls = new Array();
    urls['tb_valid'] = "/account/outside/get_user_list/?user_type=2&state=0";
    urls['tb_invalid'] = "/account/outside/get_user_list/?user_type=2&state=1";

    //初始化Table
    table = document.getElementById(table_id);
    oTableInit.Init = function () {
        $(table).bootstrapTable({
            url: urls[table_id],                //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            showColumns: true,                  //是否显示所有的列
            columns: [{
		field: 'user_number',
		title: 'ID',
		align: 'center',
	    }, {
                field: 'name',
                title: '姓名',
		align: 'center',
            }, {
                field: 'phone',
                title: '联系电话',
		align: 'center',
            }, {
                field: 'time',
                title: '注册时间',
		align: 'center',
            }, {
		field: 'area',
		title: '地区',
		align: 'center',
	    }, {
                field: 'operate',
                title: '操作',
                align: 'center',
                formatter: function(value){
			link = '<a target="_blank"  href="/account/outside/details/?number=' + value  +'" title="查看用户信息">查看</a>'
			view = [link, '|',];
			freeze = '<a class="freeze" href="#" title="冻结该账户">冻结</a>';
			recovery = '<a class="recovery" href="#" title="恢复该账户">恢复</a>';
			if(table_id==="tb_valid"){
				view.push(freeze);
			}
			else{
				view.push(recovery);
			}
		        return view.join('');
		},
		events: operateEvents,
            },]
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = { 
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
            number: $("#number").val(),
            start: $("#start").val(),
	    end: $("#end").val(),
	    area: $("#area").val(),
            search_type: $("#search_type").val(),
	    tb_name: $("#tb_name").val(),
        };
        return temp;
    };

    return oTableInit;
};

window.operateEvents = {
        
	'click .recovery': function (e, value, row, index) {
		ct = document.getElementById("ct_recovery");
		ct.innerHTML = "确定恢复账户“" + row.user_number + "”吗？";
		number = row.user_number;
		$("#RecoveryModal").modal();
	},
        'click .freeze': function (e, value, row, index) {
		lb = document.getElementById("freeze_label");
		lb.innerHTML = "冻结账户" + row.user_number;
		number = row.user_number;
		$("#FreezeModal").modal();
        },
};
</script>
<script>
var state = -1;
var number;

var Freeze = function(){
	reason = $('#reason').val();
	if(reason===""){
		$('#msg').html("请填写冻结原因");
                $('#MsgModal').modal();
		return;
	}
        $.ajax({
            url: "/account/outside/freeze/",
            type: "POST",
	    data: {'number': number, 'reason': reason},
            dataType:"text",
            success: function(data) {

                $('#FreezeModal').modal('hide');
                json = eval("("+data+")");
		state = json.state;
        	if(json.state === 0){
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-ok-sign');
		    document.getElementById('FreezeForm').reset();
		    $("#msg").html("操作成功！");
                }
		else{
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
  		    $('#msg').html("操作失败，" + json.msg);
		}
            },
	    error: function(xhr, error){
		state = -1;
		$('#msg_icon').removeAttr('class');
		$('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
		$('#msg').html("操作失败，服务器发生错误");
	    }
        });
	$('#MsgModal').modal();
	return;
};

var Recovery = function(){
        $.ajax({
            url: "/account/outside/recovery/",
            type: "POST",
	    data: {'number': number,},
            dataType:"text",
            success: function(data) {

                $('#RecoveryModal').modal('hide');
                json = eval("("+data+")");
		state = json.state;
        	if(json.state === 0){
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-ok-sign');
		    $("#msg").html("操作成功！");
                }
		else{
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
  		    $('#msg').html("操作失败，" + json.msg);
		}
            },
	    error: function(xhr, error){
		state = -1;
		$('#msg_icon').removeAttr('class');
		$('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
		$('#msg').html("操作失败，服务器发生错误");
	    }
        });
	$('#MsgModal').modal();
	return;
};

$(document).ready(function(){
	$('#MsgModal').on('hidden.bs.modal', function () {
		if(state === 0){
			$("#tb_valid").bootstrapTable('refresh', {'silent': true});
			$("#tb_invalid").bootstrapTable('refresh', {'silent': true});
		}
	});
});

</script>
<script>
	$('#nav_user').attr("class", "active");
	$('#OutsideMenu').addClass("in");
	$('#li_individual').css("background", "#E0EEE0");
</script>
{% endblock %}
